<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three Card</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="bg"></div>
<div class="warp">
	<div class="welcome">
		<div class="login">
			<p><input id="nickname" class="name" type="text" placeholder="请在此填入阁下尊姓大名,方便日后报仇..." /></p>
			<p><input class="enter" type="button" /></p>
		</div>
	</div>
	<div class="game">
		<div class="createdlg">
			<p><span>房间名称：</span><input id="table-title" type="text"/></p>
			<p><span>最小金币：</span><input id="table-mingold" type="text"/></p>
			<p class="submit"><input type="button" id="create-ok" value="确定"> <input id="create-cancel" type="button" value="取消"></p>
		</div>
		<div class="list">
			<div class="head">
				<div class="row" style="border: 0;background:none;">
					<div class="col">房间名称</div>
					<div class="col">房主</div>
					<div class="col">需求金币</div>
					<div class="col">房间人数</div>
					<div class="col">加入房间</div>
				</div>
			</div>
			<div class="clear"></div>
			<div class="box"></div>
		</div>
		<div class="oper">
			<input type="button" class="quick" />
			<input type="button" class="create" />
		</div>
	</div>
	<div class="table">
		<div class="start">
			<input type="button" value="开始游戏"/>
		</div>
		<div class="cards">
			<div class="card c1"></div>
			<div class="card c2"></div>
			<div class="card c3"></div>
			<div class="card c4"></div>
			<div class="card c5"></div>
		</div>
		<div class="clear"></div>
		<div class="users">
			<div class="user u1">
				<div class="name">我了个擦</div>
				<div class="avatar"></div>
			</div>
			<div class="user u2">
				<div class="name">我了个擦</div>
				<div class="avatar"></div>
			</div>
			<div class="mine u3">
				<div class="name">我了个擦</div>
				<div class="avatar"></div>
			</div>
			<div class="user u2">
				<div class="name">我了个擦</div>
				<div class="avatar"></div>
			</div>
			<div class="user u1">
				<div class="name">我了个擦</div>
				<div class="avatar"></div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="bar">
			<div class="btn giveup"></div>
			<div class="btn pk"></div>
			<div class="btn look"></div>
			<div class="btn raise"></div>
			<div class="btn follow"></div>
		</div>
	</div>
</div>
<script language="javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<script language="javascript" src="js/game.js"></script>
<script language="javascript">
var game = new Game("ws://test:9005");

$(function(){
	if(!window.WebSocket){
		alert('您浏览器不支持websocket，请更换chrome或者firefox');
		return ;
	}
	
	$('#nickname').keydown(function(e){
		if(e.keyCode == 13){
			login();
		}
	});
	$('.enter').click(function(){
		login();
	});
	
	$('.start input').click(function(){
		game.start();
	});
	
	$('.create').click(function(){
		$('.createdlg').show();
	});
	
	$('#create-ok').click(function(){
		var name = $('#table-title').val();
		var mingold = $('#table-mingold').val();
		game.create(name, mingold);
	});
	
	$('#create-cancel').click(function(){
		$('.createdlg').hide();
	}); 
	
	function login()
	{
		var name = $('#nickname').val();
		if(name == ""){
			alert("很明显需要输入一些字符啊，你是猪吗？");
			return ;
		}
		game.login(name);
	}
});
</script>
</body>
</html>